<route lang="json5">
{
  meta: {
    auth: true,
  },
}
</route>

<style lang="scss" scoped>
$lineWeight: 4px;
.resize-line {
  @apply bg-gray-400;

  &.right,
  &.left {
    width: $lineWeight;
    height: 100%;
  }
  &.bottom,
  &.top {
    width: 100%;
    height: $lineWeight;
  }
}
</style>

<template>
  <div class="h-full">
    <div>状态：{{ starting }}</div>
    <div class="flex flex-wrap gap-4 mt-2">
      <a-button @click="append(sentToQueue(0))">立刻执行，return 0</a-button>
      <a-button @click="append(sentToQueue(2))">等待 2s，return 2</a-button>
      <a-button @click="append(sentToQueue(4))">等待 4s，return 4</a-button>
    </div>
    <p class="mt-2 text-xs text-red-500">
      每个按钮会触发不同的异步/同步事件，这些事件会进入一个队列，按顺序从前往后执行
    </p>
    <a-button class="mt-12" @click="openView">不使用队列的效果</a-button>
  </div>
</template>

<script lang="tsx" setup>
const { append, starting } = uesEventSequence()

function sentToQueue(time: number) {
  return async () => {
    console.log(`start-${time}`)
    await timeSleep(time * 1000)
    Message.info({ content: time + '' })
    console.log(`end-${time}`)
  }
}

function openView() {
  Modal.open({
    title: '不使用时间队列',
    content: () => (
      <>
        <p>随便点点试试吧：</p>
        <div class='flex flex-wrap gap-4 mt-2'>
          <a-button onClick={sentToQueue(0)}>立刻执行，return 0</a-button>
          <a-button onClick={sentToQueue(2)}>等待 2s，return 2</a-button>
          <a-button onClick={sentToQueue(4)}>等待 4s，return 4</a-button>
        </div>
      </>
    ),
  })
}
</script>
